<template>
  <div class="body">
    <div class="header">
      <van-nav-bar title="朋友圈" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="eye-o" size="18" />
        </template>
      </van-nav-bar>
      <van-cell title="显示分享面板" @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>

    <div class="main">
      <dl
        v-for="(item, index) in list"
        :key="index"
        @click="goDetail(item.id)"
        style="display: flex"
      >
        <dt>
          <img
            style="width: 50px; height: 50px; border-radius: 30px"
            :src="item.img"
            alt=""
          />
        </dt>
        <dd>
          <div>
            <p>{{ item.title }}</p>
            <p>{{ item.word }}</p>
            <div class="list-item" v-if="list[index]">
              <van-grid :border="false" :column-num="3">
                <div v-for="(v, i) in list[index].children" :key="i">
                  <van-grid-item>
                    <van-image @click="show = true" :src="v" />
                  </van-grid-item>
                  <van-overlay :show="show">
                    <div class="wrapper" @click.stop>
                      <div class="block" @click="show = false">
                        <img :src="v.img" alt="" />
                      </div>
                    </div>
                  </van-overlay>
                </div>
              </van-grid>
            </div>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import axios from 'axios'
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      list: [],
      show: false,
    }
  },
  methods: {
    onClickRight(option) {
      Toast(option.name)
      this.showShare = true
    },
    onSelect(option) {
      Toast(option.name)
      this.showShare = false
    },
    async getList() {
      let resp = await axios.get('/api/list')
      console.log(resp)
      this.list = resp.data.list
    },
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    },
  },
  created() {
    this.getList()
    console.log(this.show)
  },
}
</script>
<style>
.body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.list {
  display: flex;
  flex-direction: column;
}
.list dl {
  display: flex;
  margin: 20px 30px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
